<template>
  <div class="wrapper">
      <van-nav-bar fixed title="商品管理" left-arrow @click-left="$utils.back($route.path);"></van-nav-bar>
      <div class="has-top">
      <div class="topmain">
      <!-- 搜索栏 -->
      <top-search
          type="primary"
          :val="val"
          :area-show="areaShow"
          :input-style="inputStyle"
          :placeholder="placeholder"
          @search="search"
          style="flex:1"
        />
        <div class="screen" @click="rightshow = true"><img class="mapicon mr-12" src="@/assets/images/sx.png" />筛选</div>
      </div>
      <van-tabs @click="tabChange" sticky ref="tabs" :offset-top="88" @scroll="scroll">
              <van-tab v-for="(item,index) in statusList" :title="item.value" :name="item.id" :key="index">
                  <van-list v-model="loading" class="productlist" :finished="finished" :finished-text="orderList.length > 0?'没有更多了':''" :immediate-check="false"
                      @load="moreData">
                      <div v-for="(item,index) in orderList" :key="index" class="mlr-24 mb-24 fs-24 bg-white br-16 van-clearfix">
                        <div class="product">
                          <div class="product-main" >
                            <img-box class="productimg" @click="goPage(item.ID)" :img-url="item.ThumbnailUrl50" />
                            <div class="p-desc" @click="goPage(item.ID)">
                              <div class="title"><div class="text-show-line-2">{{item.ProductName}}</div></div>
                              <div class="spec" v-if="item.ProductSkuList.length > 1">{{item.ProductSkuList.length}}种规格可选</div>
                              <div class="price" v-if="item.SaleMaxPrice==item.SaleMinPrice"><span>￥{{item.SaleMaxPrice}}</span>/{{item.DefaultUnit?item.DefaultUnit:item.Unit}}</div>
                              <div class="price" v-else><span>￥{{item.SaleMinPrice}}~￥{{item.SaleMaxPrice}}</span>/{{item.DefaultUnit?item.DefaultUnit:item.Unit}}</div>
                            </div>
                          </div>
                          <div class="bottom-menu">
                            <div @click="goPage(item.ID)">编辑</div>
                            <div @click="shelf(item,1)" v-if="item.SaleStatus==1">下架</div>
                            <div @click="shelf(item,2)" v-if="item.SaleStatus==2">上架</div>
                          </div>
                        </div>
                      </div>
                      <div class="no-data pb-0" v-if="blank">
                          <svg-icon icon-class="no-data" />
                          <div>暂无数据</div>
                      </div>
                  </van-list>
              </van-tab>
          </van-tabs>
      </div>
      <van-popup v-model="rightshow" position="right" :style="{width: '80%', height: '100%', 'z-index': '2016'}">
        <div class="drawer-view">
          <div class="filter-item tag-item">
						<span class="label fs-28">商品分类</span>
						<div class="tags">
							<span class="tag-item" v-for="(item,index) in CategoryList"
								:class="{'selected':Categoryactive==index}" @click="CategoryState(index)">{{item.name}}</span>
						</div>
					</div>
					<div class="filter-item tag-item">
						<span class="label fs-28">产品线</span>
						<div class="tags">
							<span class="tag-item text-show-line-1" v-for="(item,index) in ProductLine"
								:class="{'selected':ProductLineactive==index}" @click="LineState(index)">{{item.Name}}</span>
						</div>
					</div>
				<div class="drawer-bottom-bar">
					<button class="btn btn-reset" @click="cancelFilter">
						<span>重置</span>
					</button>
					<button class="btn btn-set" @click="doFilter">
						<span>确定</span>
					</button>
				</div>
			</div>
      </van-popup>
      <van-dialog v-model="upAndDown" title="温馨提示" show-cancel-button @confirm="OrderRefundApply" @cancel="cancelRefundApply">
           <div style="padding:16px;text-align:center;color:red">确定{{upAndDownstate==1?'下架':'上架'}}该商品吗？</div>
      </van-dialog>
  </div>
</template>

<script>
import TopSearch from 'components/Search'
  import SvgIcon from 'components/SvgIcon'
  import imgBox from 'components/imgBox'
  import noData from 'components/noData'
  import {
        GetSupplierStoreCategory,
        GetSupplierStoreProductLine,
        UpdateProductSaleStatus,
        GetSupplierStoreProductPageByAdmin
    } from 'api/product'
  export default {
      components: {
          SvgIcon,
          imgBox,
          noData,
          TopSearch
      },
      data() {
          return {
              upAndDownstate:null,
              upAndDownID:null,
              upAndDown:false,
              rightshow:false,
              areaShow: false,
              val: '',
              placeholder:'请输入商品名称',
              inputStyle: 'inputStyle-1',
              loading: false, // 加载load
              finished: false, // 无更多数据
              statusList: [{
                      value: '全部',
                      id: -1
                  },
                  {
                      value: '已上架',
                      id: 1
                  },
                  {
                      value: '已下架',
                      id: 2
                  }
              ], // 订单列表状态
              CategoryList: [],
              Categoryactive: -1,
              ProductLine:[],
              ProductLineactive:-1,
              requestData: { // 请求参数
                    saleStatus: -1,
                    PageIndex: 1,
                    PageSize: 10,
                    productName:''
                },
              orderList: [], // 订单列表数据
              blank: false, // 是否为空数据
              activeitem:{}
          }
      },
      mounted() {
          // 获取列表
          this.GetOrderBookPage()
          this.GetSupplierStoreCategory()
          this.GetSupplierStoreProductLine()
      },
      methods: {
        shelf(item,num){
          this.activeitem = item;
          this.upAndDownstate = num;
          this.upAndDown = true
        },
        CategoryState(index){
				this.Categoryactive = index
				this.requestData.productCategoryId = this.CategoryList[index].id
			},
      LineState(index){
				this.ProductLineactive = index
				this.requestData.lineId = this.ProductLine[index].ID
			},
        cancelFilter(){
          this.Categoryactive = -1
          this.ProductLineactive = -1
          delete this.requestData.productCategoryId
          delete this.requestData.lineId
          this.doFilter()
        },
        doFilter(){
          this.rightshow = false;
          this.orderList = []
          this.GetOrderBookPage()
        },
        closeshow(){
          console.log(123)
          this.rightshow = false
        },
          search(key) {
            console.log(key)
            this.requestData.productName = key
            this.orderList = []
            this.GetOrderBookPage()
            // this.GetWholeSaleListForSku()
          },
          // 获取列表
          GetOrderBookPage() {
              const _this = this
              GetSupplierStoreProductPageByAdmin(_this.requestData).then(res => {
                  _this.blank = false
                  _this.loading = false
                  _this.orderList = _this.orderList.concat(res.Data.Data)
                  if (_this.orderList.length == 0) {
                      _this.blank = true
                  }
                  if (_this.requestData.PageIndex >= res.Data.TotalAmout) {
                      _this.finished = true
                  } else {
                      _this.finished = false
                  }
              })
          },
          GetSupplierStoreCategory() {
                GetSupplierStoreCategory({
                    parent_path: '_0_2_',
                    InfoType: 1,
                    storeId: -1
                }).then((res) => {
                    if (res) {
                       this.CategoryList = res.Data.children;
                    }
                })
            },
            GetSupplierStoreProductLine(){
              let path ='?storeId=-1'
              GetSupplierStoreProductLine(path).then((res) => {
                    if (res) {
                       this.ProductLine = res.Data;
                    }
                })
            },
          // 上拉加载更多
          moreData() {
              this.requestData.PageIndex = this.requestData.PageIndex + 1
              this.GetOrderBookPage()
          },
          // 重新请求
          reset() {
              this.requestData.PageIndex = 1
              this.requestData.PageSize = 10
              this.orderList = []
              // 获取列表
              this.GetOrderBookPage()
          },
          goPage(id) {
            this.$router.push({
              path: '/productManage/productManageEdit/' + id
            })
          },
          // tab置顶
          scroll(data) {
              if (data.isFixed) {
                  this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
              } else {
                  this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
              }
          },
          // tab切换
          tabChange(e) {
              // 状态id
              this.requestData.saleStatus = e
              // 获取列表
              this.reset()
          },
          // 立即支付
          goPay(item) {
              window.location.href = this.$LocalDomain + '/m/product/PayOrder?id= ' + item.OrderId + '&&singleflag=1&&isBookOrder=1'
          },
          // 确认上下架
          OrderRefundApply() {
            let state;
             if(this.upAndDownstate==1){
              state = 2
             }else{
              state = 1
             }
             let path = '?ids='+this.activeitem.ID+'&state='+state
             UpdateProductSaleStatus(path).then(res => {
                  if (res.State==1) {
                      // 获取列表
                      this.reset()
                  }
              })
          },
          cancelRefundApply() {
              this.upAndDown = false
          },
          
      }
  }
</script>

<style lang="scss" scoped>
  .status {
      margin-right: -12px;
      background-color: #FDB52A;
  }

  .sef-btn {
      height: 64px;
      line-height: 64px;
      border: 1px solid #666666 !important;
  }

  .other-btn {
      @include bg-primary;
      height: 64px;
      line-height: 64px;
      border: 1px solid transparent !important;
  }

  .closecss {
      top: 20px;
      right: 16px;
      width: 50px;
      height: 50px;
  }

  .poster_main {
      text-align: center;
      padding: 62px 60px 62px;

      img {
          width: 450px;
          height: 450px;
      }

      p {
          font-size: 28px;
          color: #F54F1B;
          padding: 30px 0;
          font-weight: 500;
      }

      div {
          font-size: 28px;
          color: #333;
          font-weight: 400;
      }
  }

  /deep/.posterDiv {
      background-color: transparent;
  }

  .down {
      width: 96px;
      // height: 96px;
      // background: #8AC24C;
  }

  .share {
      background-color: #FDB52A;
  }

  .status:after {
      position: absolute;
      bottom: -10px;
      right: 0;
      width: 0;
      height: 0;
      border-right: 12px solid transparent;
      border-top: 10px solid #FDB52A;
      content: "";
  }

  /deep/.van-list__finished-text {
      color: #333;
  }
  
  /deep/.qrcode canvas {
      padding: 20px;
  }
  
  /deep/.van-field__control {
      background-color: #F7F7F7;
  }
  .topmain{
    height: 88px;
    position:fixed;
    left: 0;
    top: 88px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
    width: 100%;
  }
  .screen{
    padding-right: 20px;
    display: flex;
    align-items: center;
    border-radius: 36px;  
    img{
      width: 40px;
      height: 40px;
    }
  }
  .drawer-view{
  height: 100%;
	position: relative;
	padding-top: 88px;
	padding-bottom: 88px;
  overflow-y: scroll;
  }
  .filter-item {
			margin-bottom: 30px;

			.item-title {
				margin-bottom: 30px;
			}
		}

		.filter-date-tag {
			margin-bottom: 50px;
			display: flex;
			flex-direction: row;

			.tag-item {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				margin-left: 30px;

				&:first-child {
					margin-left: 0;
				}

			}
		}
	.drawer-bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;

		.btn {
			flex: 1;
			height: 88px;
			border-radius: 0;
		}

		.btn-reset {
			border-top: solid 1px #f4f4f4;

			span {
				@include color-primary();
			}
		}

		.btn-set {
   
      @include bg-primary;
      @include border-primary();
			span {
        color: #fff;

			}
		}
	}
	.filter-item{
		padding:24px 24px 0;
		.label{
			font-weight: bold;
			color: #101010;
		}
	}
	.select-item{
		display: flex;
		flex-direction: row;
		padding:24px 16px 24px 24px;
		align-items: center;
		.value{
			flex: 1;
			margin-left: 10px;
			text-align: right;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.tag-item{
		display: flex;
		flex-direction: column;
		.label{
			margin-bottom: 20px;
		}
	}
	.tags{
		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
		justify-content: space-between;
		&:after{
			content: "";
			width: 33%;
		}
		.tag-item{
			width: 31%;
			height: 72px;
			background: #f4f4f4;
			border-radius: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			border: solid 1px transparent;
		}
		.selected{
      @include border-primary();
			background: #FBF7F6;
      @include color-primary();
		}
	}
.productlist{
  padding-top: 88px;
}
.product{
		
		padding: 24px;
		background: #FFFFFF;
		border-radius: 24px;
		margin:0 16px 16px 16px;
	}
	.product-main{
		padding:16px 0px 24px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.productimg{
			width: 192px;
			height: 192px;
			border-radius: 8px;
			margin-right: 24px;
		}
		.p-desc{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 192px;
			.title{
				display: flex;
				justify-content: space-between;
			
			}
			.text-show-line-2{
				flex: 1;
				font-size: 28px;
				color: #333333;
			}
			.p-state{
				font-size: 24px;
				@include color-primary();
				padding-left: 12px;
				padding-top: 4px;
			}
			.p-state-6{
				color: #999999;
			}
			.spec{
				font-size: 26px;
				color: #999999;
			}
			.price{
				font-size: 24px;
				color: #333333;
				span{
					font-size: 32px;
					font-weight: bold;
				}
			}
		}
	}
	.bottom-menu{
		display: flex;
		justify-content: flex-end;
		align-items: center;

		div{
			margin-left: 16px;
			width: 160px;
			height: 64px;
			border-radius: 32px;
      border:1px solid;
      @include border-primary();
			font-size: 28px;
			@include color-primary();
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.del{
			color:#222A42;
			border-color:#222A42;
		}
	}
	.selectdiv{
		margin-right: 24px;
	}
</style>

